<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 64px">
            原商家授权信息
            <span style="float: right">
                <el-button type="primary" size="small" plain @click="onSubmit">确认续期</el-button>
                <el-button type="danger" size="small" plain @click="toMain">返回</el-button>
            </span>
        </div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">商家名称:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 470px;color: red"
                >{{detailAll.companyName}}</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">包厢/台卡数:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px;color: red"
                >{{detailAll.currentRoomPoint}}</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">有效期:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 370px;color: red"
                    v-show="$overTime(detailAll.currentExpiredTime)"
                >{{$ND()}}至{{$FS(detailAll.currentExpiredTime)}}</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 370px;color: red"
                    v-show="!$overTime(detailAll.currentExpiredTime)"
                >已过期</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">云存储:</div>
                <div class="report-table-form1-item word samll" style="width: 870px;color: red">
                    营业数据保留
                    <span>{{detailAll.currentMemoryCloudsLenght}}</span>
                    天
                    <span v-show="detailAll.currentMemoryCloudsLenght===365">
                        <span
                            v-show="$overTime(detailAll.currentCloudsExpiredTime)"
                        >，有效期{{$ND()}}至{{$FS(detailAll.currentCloudsExpiredTime)}}</span>
                        <span v-show="!$overTime(detailAll.currentCloudsExpiredTime)">，已过期</span>
                    </span>
                </div>
            </div>
        </div>

        <div class="report-table-top-title" style="height: 64px">
            续期
            <span style="color: red;font-size: 14px">
                （代理商剩余软件库存：{{detailAll.availableSoftWarePoint}}，代理商剩余云存储库存：{{detailAll.availableDataPoint}}）
            </span>
        </div>
        <div class="report-table-form1">
            <!-- <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 170px">添加包厢/台卡数量:</div>
                <div class="report-table-form1-item" style="width: 120px">
                    <el-input-number
                        size="small"
                        v-model="roomPoint"
                        controls-position="right"
                        :min="1"
                        :max="detailAll.maxPoint - detailAll.currentRoomPoint"
                    ></el-input-number>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 335px;color: red"
                >个(扣除已用包厢/卡台数量，剩余上限{{detailAll.maxPoint - detailAll.currentRoomPoint}}点)</div>
            </div> -->
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 170px">添加软件使用有效期:</div>
                <div class="report-table-form1-item" style="width: 130px">
                    <el-select v-model="softwareExpiredTime" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in options5"
                            :key="item.value + item.label"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 435px;color: red"
                >(购买2年使用10年，即注册10年仅扣除代理商双倍点数)</div>
            </div>
            <!-- <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 120px">云存储服务:</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 120px">循环存储时长:</div>
                <div class="report-table-form1-item" style="width: 120px">
                    <el-input-number
                        size="small"
                        v-model="memoryCloudsLenght"
                        controls-position="right"
                        :min="1"
                        :max="1"
                    ></el-input-number>
                </div>
                <div class="report-table-form1-item word samll" style="width: 35px">年</div>
                <div class="report-table-form1-item word samll" style="width: 60px">有效期:</div>
                <div class="report-table-form1-item" style="width: 120px">
                    <el-input-number
                        size="small"
                        v-model="memoryCloudsExpiredTime"
                        controls-position="right"
                        :min="1"
                        :max="1"
                    ></el-input-number>
                </div>
                <div class="report-table-form1-item word samll" style="width: 35px">年</div>
            </div> -->
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="color: #409EFF"
                >授权后:</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">包厢/台卡数:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px;color: red"
                >{{detailAll.currentRoomPoint}}</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">有效期:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 370px;color: red"
                    v-show="$overTime(detailAll.currentExpiredTime)"
                >{{$ND()}}至{{$FAddYS(detailAll.currentExpiredTime, softwareExpiredTime)}}</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 370px;color: red"
                    v-show="!$overTime(detailAll.currentExpiredTime)"
                >{{$ND()}}至{{$NDT(softwareExpiredTime)}}</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 150px">云存储:</div>
                <div class="report-table-form1-item word samll" style="width: 870px;color: red">
                    营业数据保留
                    <span>{{detailAll.currentMemoryCloudsLenght}}</span>
                    天
                    <span v-show="detailAll.currentMemoryCloudsLenght===365">
                        <span
                            v-show="$overTime(detailAll.currentCloudsExpiredTime)"
                        >，有效期{{$ND()}}至{{$FS(detailAll.currentCloudsExpiredTime)}}</span>
                        <span v-show="!$overTime(detailAll.currentCloudsExpiredTime)">，已过期</span>
                    </span>
                </div>
            </div>
        </div>

        <div class="report-table-top-title" style="height: 64px">代理商点数库存扣除提示</div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 120px">软件点数扣除:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px;color: red;text-align:center"
                >{{detailAll.currentRoomPoint >= this.detailAll.salePoint ? this.detailAll.salePoint : detailAll.currentRoomPoint * (softwareExpiredTime===10?2:1)}}点</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 535px"
                >（软件点数=包厢个数*软件有效期，如果选择10年则软件点数=包厢个数*2）</div>
            </div>
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 120px">云存储点数扣除:</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px;color: red;text-align:center"
                >0点</div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 535px"
                >（云存储点数=包厢个数*循环存储时长*有效期）</div>
            </div>
        </div>

        <div class="page-padding-gray-small"></div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            detailAll: {},

            roomPoint: 0,
            options5: [
                {
                    label: '一年',
                    value: 1
                },
                {
                    label: '十年',
                    value: 10
                }
            ],
            softwareExpiredTime: 1,
            memoryCloudsLenght: 1, // 循环存储时长
            memoryCloudsExpiredTime: 1 // 云存储有效期限
        }
    },
    mounted () {
    },
    created () {
        this.getDetail()
    },
    watch: {
    },
    components: {
    },
    props: {
        underLine: null
    },
    computed: {
        companyId () {
            return this.$store.state.page1KTVAgentEdit
        }
    },
    methods: {
        getDetail () {
            this.$http.post(this.$store.state.IP + '/system/company/getPointDetail', {
                data: {
                    companyID: this.companyId
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用加点详情成功')
                    console.log(response.data)
                    this.detailAll = response.data
                }
                if (response.ret !== '0') {
                    console.log('调用加点详情失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        showMessage (message) {
            this.$message({
                showClose: true,
                message: message,
                type: 'warning'
            })
        },
        onSubmit () {
            this.$http.post(this.$store.state.IP + '/system/company/addExpireTime', {
                data: {
                    software: this.softwareExpiredTime,
                    companyID: this.companyId
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.showMessage('续期成功')
                    this.toMain()
                    console.log('添加商家成功')
                }
                if (response.ret !== '0') {
                    console.log('添加商家失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        toMain () {
            this.softwareExpiredTime = 1
            this.roomPoint = 0
            this.memoryCloudsLenght = 1
            this.memoryCloudsExpiredTime = 1
            this.$store.dispatch('setKA', 0)
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-transfer-panel
    width: 400px

.order-report
    width: 100%
    background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding-white-small
        width: 100%
        height: 22px
        background: #fff

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
